<template>
      <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" v-model="searchInfo" placeholder="enter the name you search"/>&nbsp;
        <button @click="searcchHandle">Search</button>
      </div>
    </section>
</template>

<script>
import axios from 'axios'
export default {
    name:'Header',
    props:['getHeaderData'],
    data(){
        return {
        searchInfo:''
        }
    },
    methods:{
        async searcchHandle(){
            //在点击搜索按钮后,发送请求前 修改数据
            this.getHeaderData({isInit:false,isSearch:true})
           const result = await axios.get(`https://api.github.com/search/users?q=${this.searchInfo}`)
           console.log(result.data.items);

           //请求成功后
           this.getHeaderData({isSearch:false,userList:result.data.items})

           //请求成功后 清空输入框
            this.searchInfo=''
        }
    }
}
</script>

<style>

</style>